<nz-card>
  <!-- 基本信息 -->
  <nz-descriptions nzTitle="基本信息" nzSize="small" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
    <nz-descriptions-item nzTitle="创建时间">{{ redPacketInfo.createTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="发起人">{{ redPacketInfo.nickname || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="礼包ID">{{ redPacketInfo.redPacketId || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="状态">{{ redPacketInfo.state | claimStatus }}</nz-descriptions-item>
  </nz-descriptions>

  <!-- Table -->
  <div class="table-wrap">
    <p class="title-p">手机壳领取详情</p>
    
    <nz-table
      #borderedTable
      nzBordered
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      [nzFrontPagination]="false"
      (nzPageIndexChange)="onPageIndexChange($event, 0)"
      (nzPageSizeChange)="onPageSizeChange($event, 0)"
      [nzLoading]="detailLoading"
      [nzData]="redPacketRecord">
      <thead>
        <tr>
          <th>领取人</th>
          <th>客户ID</th>
          <th>领取时间</th>
          <th>领取详情</th>
          <th>使用详情</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of borderedTable.data">
          <td>
            <dl class="user-dl">
              <dt>
                <img nz-image width="32px" height="32px" [nzSrc]="data.userImg" [nzFallback]="fallback" alt="" />
              </dt>
              <dd>{{ data.nickname }}</dd>
            </dl>
          </td>
          <td>{{ data.userId }}</td>
          <td>{{ data.createTime || '-' }}</td>
          <td>{{ data.content || '-' }}</td>
          <td>
            <button nz-button nzType="link" (click)="openModal(data)">查看</button>
          </td>
        </tr>
        <!-- 合计 -->
        <tr *ngIf="redPacketRecord.length" style="background-color: #fdfdfd;">
          <td colspan="2">合计</td>
          <td>{{ redPacketInfo.remainingPacket | receivedNum: redPacketInfo.totalPacket }} / {{ redPacketInfo.totalPacket }} 人已领取</td>
          <td colspan="2">{{ redPacketInfo.content || '-' }}</td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
  </div>
</nz-card>

<!-- modal START -->
<nz-modal
  [(nzVisible)]="isVisible"
  nzWidth="1100px"
  nzTitle="使用详情"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">
  <ng-container *nzModalContent>
    <nz-table
      #modalTable
      nzSize="small"
      nzBordered
      nzShowSizeChanger
      nzShowQuickJumper
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="modalTableParams.total"
      [nzPageIndex]="modalTableParams.page"
      [nzPageSize]="modalTableParams.pageSize"
      [nzShowTotal]="modalTotalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event, 1)"
      (nzPageSizeChange)="onPageSizeChange($event, 1)"
      [nzFrontPagination]="false"
      [nzLoading]="modalTbaleLoading"
      [nzData]="modalTableData">
      <thead>
        <tr>
          <th nzAlign="center">券码</th>
          <th nzAlign="center">领取手机壳型号</th>
          <th nzAlign="center">领取时间</th>
          <th nzAlign="center">使用时间</th>
          <th nzAlign="center">过期时间</th>
          <th nzAlign="center">关联订单ID</th>
          <th nzAlign="center">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of modalTable.data">
          <td nzAlign="center">{{ data.id }}</td>
          <td nzAlign="center">{{ data.textureName || '-' }}</td>
          <!-- 领取时间 -->
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <!-- 使用时间 -->
          <td nzAlign="center">{{ data.useTime || '-' }}</td>
          <!-- 过期时间 -->
          <td nzAlign="center">{{ data.expireTime || '-' }}</td>
          <td nzAlign="center">{{ data.orderNum || '-' }}</td>
          <td nzAlign="center">{{ data.status | useStatus }}</td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #modalTotalTemplate let-total>共有 {{ modalTableParams.total }} 条</ng-template>
  </ng-container>
</nz-modal>
<!-- modal END -->